
 <div layout="row" flex>
<md-content  class="md-padding">

  <div  ng-repeat="server in servers">


           <md-card ng-if="server.id==selectedServer">
             <md-card-content>
                 <p  ng-switch="server.state" class="sectionheader">
                   <span ng-switch-when="Master" class="label label-primary">Master   {{server.host}}:{{server.port}}<label
                           ng-if="server.isVirtualMaster==true">-VMaster   {{server.host}}:{{server.port}}</label></span>
                       <span ng-switch-when="Suspect" class="label label-warning">Suspect   {{server.host}}:{{server.port}}<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                       <span ng-switch-when="SlaveErr" class="label label-warning">Slave Error   {{server.host}}:{{server.port}}<label
                               ng-if="server.isVirtualMaster==true">-VMaster   {{server.host}}:{{server.port}}</label></span>
                       <span ng-switch-when="StandAlone" class="label label-info">Standalone   {{server.host}}:{{server.port}}<label
                               ng-if="server.isVirtualMaster==true">-VMaster   {{server.host}}:{{server.port}}</label></span>
                       <span ng-switch-default class="label label-default">{{server.state}}  {{server.host}}:{{server.port}}
                           <label ng-if="server.isVirtualMaster==true">-VMaster   {{server.host}}:{{server.port}}</label></span>
                </p>
              </md-card-content>
              <style>
                table{
                  table-layout: fixed;
                  width: 100%;


                }
                td {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                }
      </style>
                   <table  border=1 >
                     <col  width="20%"/>
                      <col width="20%"/>
                      <col width="20%"/>

                      <tr>
                         <th colspan=2>Schema</th>
                         <th >Name</th>
                         <th >Engine</th>
                         <th >Rows</th>
                         <th>Data</th>
                         <th >Index</th>
                         <th >%</th>
                      </tr>

                      <tr ng-repeat="table in tables">
                         <td><md-button class="md-raised" ng-click="checksumtable(table.table_schema,table.table_name)">Checksum</md-button> <md-button  ng-if="settings.config.shardproxy" class="md-raised" ng-click="reshardtable(table.tableSchema,table.tableName)">Reshard</md-button> </td>
                         <td class="process">{{ table.table_schema }}</td>
                         <td class="process">{{ table.table_name }}    </td>
                         <td class="process">{{ table.engine }} </td>
                         <td class="process">{{ table.table_rows }}</td>
                         <td class="process">{{ table.data_length }}</td>
                         <td class="process">{{ table.index_length }}</td>
                         <td class="process" align="center"><ng-gauge type="arch" value="getTablePct(table.data_length ,table.index_length)"
                           thick="3" size="40"  duration="300" min="0" max="100"  cap="round" append="%" /> </td>

                      </tr>
                   <table>

             </md-card>

           </div>
             <BR><BR>


</md-content>
</div>
